import { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Switch, SafeAreaView } from 'react-native';
// 引入主题上下文，用于跨组件共享主题状态
import { ThemeContext } from './src/context/ThemeContext';
// 引入颜色配置对象
import { myColors } from './src/styles/Colors';
// 引入计算器键盘组件
import MyKeyBoard from './src/components/MyKeyBoard';

export default function App() {
  // 用于管理应用主题，初始为 light（浅色模式）
  const [theme, setTheme] = useState('light');
  return (
    // 提供主题上下文，让子组件能获取和修改 theme 状态
    <ThemeContext.Provider value={theme}>
      {/* 根据主题设置 SafeAreaView 的样式，浅色模式用默认 container 样式，深色模式修改背景为黑色 */}
      <SafeAreaView style={theme === "light" ? styles.container : [styles.container, { backgroundColor: "#000" }]}>
        {/* 设置状态栏样式，自动适配主题 */}
        <StatusBar style="auto" />
        {/* 切换主题的开关，value 绑定当前主题是否为 light，点击时切换主题 */}
        <Switch
          value={theme === "light"}
          onValueChange={() => { setTheme(theme === "light" ? "dark" : "light") }}
        />
        {/* 渲染计算器键盘组件 */}
        <MyKeyBoard />
      </SafeAreaView>
    </ThemeContext.Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    // 让组件占满父容器垂直空间
    flex: 1,
    // 浅色模式下的背景色
    backgroundColor: myColors.light,
    // 水平方向居中对齐子组件
    alignItems: 'center',
    // 垂直方向靠上对齐子组件
    justifyContent: 'flex-start',
  },
});